<template>
  <view>
    <UgoSearch></UgoSearch>
    <u-swiper :list="swiperList" name="image_src"></u-swiper>
    <view class="nav u-flex">
      <navigator v-for="item in navList" :key="item.name" class="u-flex-1">
        <u-image width="100%" :src="item.image_src" mode="widthFix"></u-image>
      </navigator>
    </view>
	<!-- 楼层模块 -->
    <!-- 4 楼层 -->
    <view class="floor">
      <view
        class="floor-group"
        v-for="item1 in floorList"
        :key="item1.floor_title.name"
      >
        <view class="floor-title">
          <u-image
            width="100%"
            mode="widthFix"
            :src="item1.floor_title.image_src"
          ></u-image>
        </view>
        <view class="floor-list">
          <navigator
            v-for="item2 in item1.product_list"
            :key="item2.name"
          >
            <u-image
              width="100%"
              height="100%"
              mode="scaleToFill"
              :src="item2.image_src"
            ></u-image>
          </navigator>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      swiperList: [],
      navList: [],
      floorList: [],
    };
  },
  onLoad() {
    this.getSwiper(), this.nav(), this.getFloor();
  },
  methods: {
    async getSwiper() {
      // const [err, res] = await uni.request({
      //   url: "https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata",
      // });
      // this.swiperList = res.data.message;

 this.getSwiper=await this.$u.http.get('/home/swiperdata')

    },
    // 导航模块
    async nav() {
      // const [err, res] = await uni.request({
      //   url: "https://api-hmugo-web.itheima.net/api/public/v1/home/catitems",
      // });
      // this.navList = res.data.message;
      this.navList=await this.$u.http.get('/home/catitems')
    },

    // 楼层
    async getFloor() {
      // const [err, res] = await uni.request({
      //   url: "https://api-hmugo-web.itheima.net/api/public/v1/home/floordata",
      // });
      // this.floorList = res.data.message;
   this.floorList=await this.$u.http.get('/home/floordata')
    },
  },
};
</script>
<style lang="scss" scoped >
.floor-group {
  margin-top: 10rpx;
}
.floor-list {
  padding: 0 12rpx;

  /* 清除浮动 */
  overflow: hidden;
  navigator {
    float: left;
  }
  // 第一张图片
  navigator:nth-child(1) {
    width: 232rpx;
    height: 386rpx;
  }
  /* 后四张图片 */
  navigator:nth-last-child(-n + 4) {
    width: 233rpx;
    height: 188rpx;
  }
  /* 2 和 4 图片 */
  navigator:nth-child(2),
  navigator:nth-child(4) {
    margin: 0 15rpx;
  }

  /* 后两张图片 */
  navigator:nth-last-child(-n + 2) {
    margin-top: 10rpx;
  }
}
</style>